import { defineComponent, onMounted, type PropType, toRefs } from 'vue'
import { Button, Card, Form, FormItem, Input, Textarea } from 'ant-design-vue'
import { useDetail } from './use-detail'
import { useForm } from './use-form'
import { BusinessPageTypeEnum } from '@/enums/pageTypeEnum'

const DataDetail = defineComponent({
  name: 'DataDetail',
  props: {
    code: {
      type: [String, Number],
      required: false
    },
    businessType: {
      type: String as PropType<BusinessPageTypeEnum>,
      required: true,
      validator: (value: string) => {
        // 检查传入的值是否在枚举的有效值中
        return Object.values(BusinessPageTypeEnum).includes(value as BusinessPageTypeEnum)
      }
    }
  },
  emits: ['cancelModal', 'confirmModal'],
  setup(props, ctx) {
    const { meta, state, initForm, getFormValues } = useForm()
    const { status, createOrUpdate, getDataById } = useDetail(getFormValues)

    const handleCommit = async () => {
      await createOrUpdate()
      initForm()
      ctx.emit('confirmModal')
    }

    const resetForm = () => {
      initForm()
      ctx.emit('cancelModal')
    }

    const fetchData = async () => {
      if (props.businessType === BusinessPageTypeEnum.UPDATE || props.businessType === BusinessPageTypeEnum.DETAIL) {
        // 查询值
        state.detailForm = await getDataById(props.code)
      }
    }

    onMounted(async () => {
      await fetchData()
    })

    return {
      ...toRefs(props),
      ...toRefs(state),
      ...toRefs(status),
      ...toRefs(meta),
      handleCommit,
      resetForm
    }
  },

  render() {
    const { businessType, detailForm, rules, handleCommit, resetForm } = this
    return (
      <>
        <Card>
          <Form
            ref='detailFormRef'
            model={detailForm}
            rules={rules}
            labelCol={{ span: 2 }}
            wrapperCol={{ span: 18 }}
            style={{ width: '80%' }}
            onFinish={handleCommit}
          >
            <FormItem label='仓库名称' name='name'>
              <Input
                disabled={businessType === BusinessPageTypeEnum.DETAIL}
                v-model={[detailForm.name, 'value']}
                showCount
                maxlength={30}
                placeholder='请输入仓库名称'
              />
            </FormItem>
            <FormItem label='仓库负责人' name='manager'>
              <Input
                disabled={businessType === BusinessPageTypeEnum.DETAIL}
                v-model={[detailForm.manager, 'value']}
                maxlength={10}
                placeholder='请输入仓库负责人'
              />
            </FormItem>
            <FormItem label='联系电话' name='telephone'>
              <Input
                disabled={businessType === BusinessPageTypeEnum.DETAIL}
                v-model={[detailForm.telephone, 'value']}
                maxlength={11}
                placeholder='请输入联系电话'
              />
            </FormItem>
            <FormItem label='仓库地址' name='address'>
              <Input
                disabled={businessType === BusinessPageTypeEnum.DETAIL}
                v-model={[detailForm.address, 'value']}
                showCount
                maxlength={255}
                placeholder='请输入仓库地址'
              />
            </FormItem>
            <FormItem label='备注' name='description'>
              <Textarea
                disabled={businessType === BusinessPageTypeEnum.DETAIL}
                v-model={[detailForm.description, 'value']}
                maxlength={255}
                rows={3}
                placeholder='请输入'
              />
            </FormItem>

            <FormItem wrapperCol={{ span: 12, offset: 12 }}>
              {businessType === BusinessPageTypeEnum.DETAIL && <Button onClick={resetForm}>返回</Button>}
              {businessType !== BusinessPageTypeEnum.DETAIL && (
                <>
                  <Button type='primary' htmlType='submit'>
                    提交
                  </Button>
                  <Button style={{ marginLeft: '12px' }} onClick={resetForm}>
                    取消
                  </Button>
                </>
              )}
            </FormItem>
          </Form>
        </Card>
      </>
    )
  }
})
export default DataDetail
